﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
    <a href="Default.aspx" runat="server"> Core examples </a> &nbsp;&nbsp;
    <a  href="Plugins.htm" runat="server"> Plugin Tests </a> &nbsp;&nbsp;
    <a  href="Misc/RegressionTests.aspx" runat="server"> Regression Tests </a> &nbsp;&nbsp;
    <a href="UploadSample.aspx" runat="server"> Upload example </a> </div>
<h3>Image404 Plugin Test</h3>
    <div>
    There should be a photo of the sun.
    <img src="missing-file.jpg?404=/Sun_256.png" runat="server" />
    <br />
    This uses a a URL rewrite rule to affect an entire folder, eliminating need for individual specification of the 404 command. Should also display a sun.
    <img src="/propertyimages/missing.jpg" runat="server" />
    <br />
    This 404 image is scaled the same way as the original request (width=100).
    <img src="missing-file.jpg?width=100&404=/Sun_256.png" />
    <br />
    This 404 image is fliped the same way as the original request
    because the flip command is allowed(flip=x).
    <img src="missing-file.jpg?flip=x&404=/Sun_256.png" />
    <br />
    This 404 image is <em>not</em> source-fliped the same way as the original request
    because the sFlip command is removed (sFlip=x).
    <img src="missing-file.jpg?sFlip=x&404=/Sun_256.png" />
    </div>
    <h3>CloudFront test</h3>
        <div>
    <p>CloudFront removes all querystrings. The CloudFront plugin allows querystrings to bypass the querystring guillotine by using ';' instead of '?' and '&'. </p>
    <img src="red-leaf.jpg;width=100;height=200" />

    <h2>PrettyGifs dithering support</h2>
        <h3>Without dither</h3>
    <img src="red-leaf.jpg?width=200&format=gif" runat="server" />
    <h3>With dither (Floyd-Steinberg  30%)</h3>
    <img src="red-leaf.jpg?width=200&format=gif&dither=true" runat="server" />
    <h3>With 4-pass dither (Floyd-Steinberg  30%)</h3>
    <img src="red-leaf.jpg?width=200&format=gif&dither=4pass" runat="server" />
    
    <h3>Without dither</h3>
    <img src="red-leaf.jpg?width=200&format=gif" runat="server" />
    <h3>20% dither</h3>
    <img src="red-leaf.jpg?width=200&format=gif&dither=20" runat="server" />
    <h3>50% dither</h3>
    <img src="red-leaf.jpg?width=200&format=gif&dither=50" runat="server" />
    <h3>75% dither</h3>
    <img src="red-leaf.jpg?width=200&format=gif&dither=75" runat="server" />

    <h2>FolderResizeSyntax plugin</h2>   
    <h3>Should be a 40px jpeg</h3>
       <img src="resize(40,40)/red-leaf.jpg" runat="server" />
       <h3>Should be a 40px gif</h3>
       <img src="resize(40,40,gif)/red-leaf.jpg" runat="server" />

    <h2>Gradient plugin test (css and img)</h2>
    <div style="background:url(gradient.png?width=8&height=8&angle=45&color1=888&color2=white);">
    <img src="gradient.png?width=500&height=300&angle=90&color1=green&color2=ffffff33" />
    </div>
    <h3>SamplePlugin test</h3>
    This should display "Success!"
    <img src="gradient.png?color1=white&color2=gray&angle=90&width=200&height=200&sample=Success!" />
    <h2>SizeLimiting plugin tests</h2>
    The following request should result in an 800x600 or smaller photo: <a href="quality-original.jpg?width=1000">click here</a>.
    <br />The following request should throw an error: <a href="quality-original.jpg?width=1000&paddingWidth=5000">click here</a>.
    <h2>Watermark plugin test</h2>
     <h3>This should have a watermark of a sun</h3>
    <img src="quality-original.jpg?width=400&watermark=Sun_64.png" />
    <h3>This should not, since the watermark file doesn't exist</h3>
    <img src="quality-original.jpg?width=400&watermark=Sun_64-missing.png" />
    <h3>This should say Hello World!</h3>
    <img src="quality-original.jpg?width=400&watermark=test2" />
    <h3>This should have a transparent sun in the top left corner</h3>
    <img src="quality-original.jpg?width=400&watermark=test1" />
    <h3>This places a gradient background behind the planet using a background layer and the Gradient plugin.</h3>
    <img src="saturn_256.png?watermark=gradientbg" />

    <h2>ImageHandlerSyntax plugin</h2>
    <h3>WebImageResizer compatibility</h3>

    <img src="ImageHandler.ashx?src=fountain-small.jpg&width=100&height=100&format=jpg&rotate=45" />

        <h3>"Image Handler for ASP.NET 2.0" compatibility</h3>
    <img src="imghandler.ashx?h=100&w=100&img=fountain-small.jpg " />
   
     <h3>BBImageHandler compatibility</h3>
    <img src="bbimagehandler.ashx?File=fountain-small.jpg&width=150&ResizeMode=FitSquare&BackColor=F58719&border=10" />

     <h3>BetterImageProcessor compatibility</h3>
    <img src="fountain-small.jpg?w=100&h=100" />

    <h2>AutoRotate plugin.</h2>

    <h3>Without &autorotate=true</h3>
    <img src="autorotate/oriented.jpg" />
    <img src="autorotate/oriented-2-(flip-x).jpg" />
    <img src="autorotate/oriented-3-(180).jpg" />
    <img src="autorotate/oriented-4-(180-flip-x).jpg" />
    <img src="autorotate/oriented-5-(90-flip-y).jpg" />
    <img src="autorotate/oriented-6-(270).jpg" />
    <img src="autorotate/oriented-7-(270-flip-y).jpg" />
    <img src="autorotate/oriented-8-(90).jpg" />
    <h3>With &autorotate=true</h3>
        <img src="autorotate/oriented.jpg?autorotate=true" />
    <img src="autorotate/oriented-2-(flip-x).jpg?autorotate=true" />
    <img src="autorotate/oriented-3-(180).jpg?autorotate=true" />
    <img src="autorotate/oriented-4-(180-flip-x).jpg?autorotate=true" />
    <img src="autorotate/oriented-5-(90-flip-y).jpg?autorotate=true" />
    <img src="autorotate/oriented-6-(270).jpg?autorotate=true" />
    <img src="autorotate/oriented-7-(270-flip-y).jpg?autorotate=true" />
    <img src="autorotate/oriented-8-(90).jpg?autorotate=true" />
        <h3>With &autorotate=true&freeimage=true (requires freeimagedecoder plugin)</h3>
        <img src="autorotate/oriented.jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-2-(flip-x).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-3-(180).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-4-(180-flip-x).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-5-(90-flip-y).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-6-(270).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-7-(270-flip-y).jpg?autorotate=true&decoder=freeimage" />
    <img src="autorotate/oriented-8-(90).jpg?autorotate=true&decoder=freeimage" />

    <h2>Presets plugin allows you to specify groups of settings and reference them by name</h2>

    <h3>Using preset=thumb</h3>
    <img src="quality-original.jpg?preset=thumb" />
    <h3>Using preset=thumb&maxwidth=300</h3>
    <img src="quality-original.jpg?preset=thumb&maxwidth=300" />
    <h3>Using preset=thumb-defs&maxwidth=300  (thumb-defs provides defaults that can be overridden)</h3>
    <img src="quality-original.jpg?preset=thumb-defs&maxwidth=300" />



    </div>
    
</body>
</html>
